<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/3-already-order.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/5-pay.css">
    <title>Document</title>
</head>
<body>
    <div class="hole-body">
            <!-- 手机最顶部 -->
        <div class="hole-top"></div>
        <div class="hole-div">
            <!-- 页面顶部 -->
            <div class="top">
                <div class="t-left">
                    <i class="fa fa-chevron-left" ></i>
                    <p class="tl-text1">购物车</p>
                    <p class="tl-text2">收藏</p>
                </div>
                <div class="t-right">
                    <p class="tr-text">管理</p>
                </div>
            </div>
            <!-- 页面顶部框 -->
            <div class="top-buy">
                <!-- 顶部 -->
                <div class="tb-top">
                    <i class="fa fa-cutlery"></i>
                    <p class="tbt-text1">美食</p>
                    <p class="tbt-text2">到店吃</p>
                </div>
                <!-- 中部菜品框 -->
                <ul class="tb-ul">
                    <li class="tbu-li">
                        <div class="tbul-top">
                            <!-- 图标 -->
                            <i class="fa fa-check-circle"></i>
                            <div class="tbut-right">
                                <p class="tbutr-text">牛牛章·章鱼水煎肉</p>
                                <i class="fa fa-angle-right"></i>
                            </div>
                        </div>
                        <div class="tbul-bottom">
                            <div class="tbulb-left">
                                <!-- 图标 -->
                                <i class="fa fa-check-circle"></i>
                            </div>
                            <div class="tbulb-right">
                                <div class="tbulbr-left">
                                    <img src="/icon/page5/火锅-填充.png" alt="火锅" class="tbulbrl-img">
                                </div>
                                <div class="tbulbr-right">
                                    <div class="tbulbrr-top">
                                        <p class="tbulbrrt-text">
                                            牛牛章鱼水煎肉2人餐
                                        </p>
                                    </div>
                                    <div class="tbulbrr-bottom">
                                        <p class="tbulbrrb-text1">
                                            <span style="font-size: 2vw; margin-bottom: 0.4vw;">￥</span>158<span style="text-decoration: line-through; font-size: 2vw; color: rgb(139, 139, 139);  margin-bottom: 0.4vw; margin-left: 2vw;">￥258</span>
                                        </p>
                                        <div class="tbulbrrb-right">
                                            <div class="tbulbrrbr-1">-</div>
                                            <div class="tbulbrrbr-2">1</div>
                                            <div class="tbulbrrbr-3">+</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </li>
                    <li class="tbu-li">
                       
                        <div class="tbul-bottom">
                            <div class="tbulb-left">
                                <!-- 图标 -->
                                <i class="fa fa-check-circle"></i>
                            </div>
                            <div class="tbulb-right">
                                <div class="tbulbr-left" style="background-color: rgb(211, 58, 41);">
                                    <img src="/icon/page5/14干锅dry pot.png" alt="14干锅dry" class="tbulbrl-img">
                                </div>
                                <div class="tbulbr-right">
                                    <div class="tbulbrr-top">
                                        <p class="tbulbrrt-text">
                                            干锅虾
                                        </p>
                                    </div>
                                    <div class="tbulbrr-bottom">
                                        <p class="tbulbrrb-text1">
                                            <span style="font-size: 2vw; margin-bottom: 0.4vw;">￥</span>54<span style="text-decoration: line-through; font-size: 2vw; color: rgb(139, 139, 139);  margin-bottom: 0.4vw; margin-left: 2vw;">￥78</span>
                                        </p>
                                        <div class="tbulbrrb-right">
                                            <div class="tbulbrrbr-1">-</div>
                                            <div class="tbulbrrbr-2">1</div>
                                            <div class="tbulbrrbr-3">+</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </li>
                    <li class="tbu-li">
                        <div class="tbul-top">
                            <!-- 图标 -->
                            <i class="fa fa-check-circle"></i>
                            <div class="tbut-right">
                                <p class="tbutr-text">精气神 冰粉店</p>
                                <i class="fa fa-angle-right"></i>
                            </div>
                        </div>
                        <div class="tbul-bottom">
                            <div class="tbulb-left">
                                <!-- 图标 -->
                                <i class="fa fa-check-circle"></i>
                            </div>
                            <div class="tbulb-right">
                                <div class="tbulbr-left" style="background-color: rgb(241, 220, 116);">
                                    <img src="/icon/page5/冰粉.png" alt="冰粉" class="tbulbrl-img">
                                </div>
                                <div class="tbulbr-right">
                                    <div class="tbulbrr-top">
                                        <p class="tbulbrrt-text">
                                            红糖冰粉
                                        </p>
                                    </div>
                                    <div class="tbulbrr-bottom">
                                        <p class="tbulbrrb-text1">
                                            <span style="font-size: 2vw; margin-bottom: 0.4vw;">￥</span>7<span style="text-decoration: line-through; font-size: 2vw; color: rgb(139, 139, 139);  margin-bottom: 0.4vw; margin-left: 2vw;">￥12</span>
                                        </p>
                                        <div class="tbulbrrb-right">
                                            <div class="tbulbrrbr-1">-</div>
                                            <div class="tbulbrrbr-2">1</div>
                                            <div class="tbulbrrbr-3">+</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </li>
                </ul>
                <!-- 下部金额框 -->
                <div class="tb-quan">
                    <i class="fa fa-money"></i>
                    <p class="tbq-text">
                        领券结算最高再减2.00元
                    </p>
                    <div class="tbq-right">
                        <p class="tbqr-text">领取</p>
                    </div>
                </div>
                <!-- 底部结算框 -->
                <dib class="rb-bottom">
                    <div class="rbb-left">
                       <!-- 图标 -->
                        <i class="fa fa-check-circle"></i> 
                        <p class="rbbl-text">
                            全选
                        </p>
                    </div>
                    <div class="rbb-right">
                          <div class="rbbr-left">
                            <div class="rbbrl-top">
                                <p class="rbbrlt-left">
                                    已选2件&nbsp;
                                </p>
                                <p class="rbbrlt-mid">
                                    合计&nbsp;
                                </p>
                                <p class="rbbrlt-right">
                                    <span style="font-size: 3vw;
                                    width: auto;">￥</span>219
                                </p>
                            </div>
                            <div class="rbbrl-bottom">
                                <p class="rbbrlb-text">
                                    共减 ￥125 明细^
                                </p>
                            </div>
                          </div>
                          <div class="rbbr-right">
                            <p class="rbbrr-text">
                                结算美食
                            </p>
                          </div>
                    </div>
                </dib>
            </div>
            <!-- 中部选择框 -->
            <div class="mid">
                    <ul class="mid-list-ul">
                        <li class="mlu-li">
                            <p class="li-text">精选</p>
                            <div class="li-light"></div>
                        </li>
                        <li class="mlu-li">
                            <p class="li-text">到店吃</p>
                            <div class="li-light" style="background-color:rgb(244, 244, 244);"></div>
                        </li>
                        <li class="mlu-li">
                            <p class="li-text">次日自提</p>
                            <div class="li-light" style="background-color:rgb(244, 244, 244);"></div>
                        </li>
                        <li class="mlu-li">
                            <p class="li-text">送上门</p>
                            <div class="li-light" style="background-color:rgb(244, 244, 244);"></div>
                        </li>
                    </ul>
            </div>
            <!-- 底部框 -->
            <div class="buy-bottom">
                <div class="right-bottom">
                    <div class="top-img-buy">
                        <img src="/icon/index/鱼.png" alt="店铺" class="dp-rb" style="width: 80%;">
                    </div>
                    <div class="text-1">实惠 鲜香烤鱼</div>
                    <div class="text-2">4.9分 | 月售3419</div>
                    <div class="text-3">
                        <p class="bottom-text-buy-zk">
                            20减4
                        </p>
                        <p class="bottom-text-buy-zk">
                            30减5
                        </p>
                        <p class="bottom-text-buy-zk">
                            45减7
                        </p>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="top-img-buy">
                        <img src="/icon/page5/爆炒虾尾.png" alt="店铺" class="dp-rb" style="width: 80%;">
                    </div>
                    <div class="text-1">馋 爆炒虾尾</div>
                    <div class="text-2">4.9分 | 月售2556</div>
                    <div class="text-3">
                        <p class="bottom-text-buy-zk">
                            100减5
                        </p>
                        <p class="bottom-text-buy-zk">
                            3折起
                        </p>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="top-img-buy">
                        <img src="/icon/page5/牛肉面.png" alt="店铺" class="dp-rb" style="width: 80%;">
                    </div>
                    <div class="text-1">干拌 牛肉面</div>
                    <div class="text-2">4.8分 | 月售3219</div>
                    <div class="text-3">
                        <p class="bottom-text-buy-zk">
                            10减0.1
                        </p>
                        <p class="bottom-text-buy-zk">
                            8.89折起
                        </p>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="top-img-buy">
                        <img src="/icon/page5/蛋炒饭.png" alt="店铺" class="dp-rb" style="width: 80%;">
                    </div>
                    <div class="text-1">十里飘香 蛋炒饭</div>
                    <div class="text-2">4.9分 | 月售3419</div>
                    <div class="text-2" style="color: black;">支持自取
                    </div>
                </div>
            </div>
            <!-- 底部导航栏 -->
            <div class="bottom">
                <ul class="fixed" style="background-color: #fff; ">
                    
                    <li class="bottom-others">
                        <img src="/icon/bottom/首页.png" alt="首页" class="index-img">
                         <p class="index-text">首页</p>
                     </li>
                    <li class="bottom-others">
                       <img src="/icon/bottom/电商.png" alt="电商" class="index-img">
                        <p class="index-text">电商</p>
                    </li>
                    <li class="bottom-others">
                        <img src="/icon/bottom/文本.png" alt="消息" class="index-img">
                        <p class="index-text">消息</p>
                    </li>
                    <li class="bottom-others">
                        <img src="/icon/bottom/购物车_s.png" alt="购物车选中" class="index-img">
                        <p class="index-text selected">购物车</p>
                    </li>
                    <li class="bottom-others">
                        <img src="/icon/bottom/我的.png" alt="我的" class="index-img">
                        <p class="index-text">我的</p>
                    </li>
                </ul>
                </ul>
            </div>
        </div>
    
    </div>
 
</body>
</html>